<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" %>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
	
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap-datetimepicker.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->

<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<link href="/SpringMVCMybatis/css/bootstrap-datetimepicker.css"
	rel="stylesheet" />
<link href="/SpringMVCMybatis/css/bootstrap.css" rel="stylesheet" />
<link href="/SpringMVCMybatis/css/bootstrap.min.css" rel="stylesheet" />
<link href="/SpringMVCMybatis/css/custom.css" rel="stylesheet" />



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	var stuNs="";

	function addToTable(){
		
		var stu1 = document.getElementById("s1");
		var index1=stu1.selectedIndex ;
		var stu1id = stu1.options[index1].value;
		var stu1name = stu1.options[index1].text;
		
		var stu2 = document.getElementById("s2");
		var index2=stu2.selectedIndex ;
		var stu2id = stu2.options[index2].value;
		var stu2name = stu2.options[index2].text;
		
		var newTr = document.getElementById("table1").insertRow();
		var newTd1 = newTr.insertCell();
		newTd1.innerText = stu1name;
		var newTd2 = newTr.insertCell();
		newTd2.innerText = stu2name;
		if(stu1name == ""){
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu2id;
			stuNs += stu2id+"_";
		}else if(stu2name == ""){
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu1id;
			stuNs += stu1id+"_";
		}else{
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu1id+"|"+stu2id;
			stuNs += (stu1id+"|"+stu2id)+"_";
		}
		var newTd4 = newTr.insertCell();
		newTd4.innerHTML = '<button id="del" type="button"  class="btn btn-primary">删除</button>';
	}


	
	$("document").ready(function(){
	$("body").on('click','#del',function(){
	 $(this).parent().parent().remove()
   
	})
	
	
	$("#tijiao").click(function(){
		var s = new Set();

  $("#table1 tr td:nth-child(3)").each(function(){
  //此处需转义
  $.getJSON("insert?gruop="+$(this).text().replace("|", "%7C"), function(result) {
  })
  
});	
	
/* 	$.getJSON("group/insert?gruop=", function(result) {
					
					$.each(result, function(i, field) {
					
				$("#tablequestion").append("<tr><td><input type='checkbox' id='td1' value="+field.id+">" + field.id + "</td><td>" + field.content +"</td></tr>");

			});
		
		
		});	 */
		alert("分组成功")
	
	})
	})
		
	
</script>
<body>
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src=""
						class="user-image img-responsive" /></li>

					<li><a href="../selfgread"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="../teamgread"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="../que/AssginTask"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="group"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="../SearchScore/toSearch"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="../Data"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h2>结对分组</h2>
						<p><h3>共${Num}组</h3>
					</div>
					
				</div>
				
				<p id="p1">
				
				
				<!-- /. ROW  -->
				<hr />
				<div class="col-sm-offset-10 col-sm-2">
					<input id="date" style="background: transparent; border: none;"
						disabled="true"font-size:50px;"></input>
				</div>

				<div class="row" style="padding: 50px 0px 0px 0px">
					<div class="col-sm-offset-5 col-sm-7">
						<h3>
							<font face="隶书" color="	">请 选 择 结 对 成 员</font>
						</h3>
					</div>
					<div class="col-sm-offset-4 col-sm-8"
						style="padding: 40px 0px 0px 0px">
						组员一:<select id="s1" style="width: 200px">
						
						<c:forEach items="${all}" var="st">
					<option value=${st.id}>
						${st.disname}</option>
					
				 </c:forEach>
						<option value=""></option>
						</select>
						 组员二:<select id="s2" style="width: 200px">
							
							<c:forEach items="${all}" var="st">
					<option value=${st.id}>
						${st.disname}</option>
					
				</c:forEach>
													<option value=""></option>
							
							</select>
					</div>
				</div>

				<div class="row" style="padding: 30px 0px 0px 125px">
					<div class="col-sm-offset-5 col-sm-7">
						<input type="button" id="b1" class="btn btn-primary"
							onclick="addToTable()" value="添加" /><br />
					</div>
					<div class="row" style="padding: 30px 0px 0px 100px">
						<div class="col-sm-offset-4 col-sm-8">
							<font color="#FF0000">Tip:若需单人组队，一组员选空白</font><br />
						</div>
					</div>
				</div>

				<div class="row" style="padding: 50px 0px 0px 0px">
					<div class="table-responsive">
						<table class="table table-striped" id="table1"
							style="text-align: center">
							<thead>
								<tr>
									<th style="text-align: center">组员1</th>
									<th style="text-align: center">组员2</th>
									<th style="text-align: center">组员id</th>
									<th style="text-align: center">删除</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>

				<div class="row" style="padding: 30px 0px 0px 125px">
					<div class="col-sm-offset-5 col-sm-7">
						<input type="button" class="btn btn-primary"
							id="tijiao" value="提交" />
					</div>
				</div>

			</div>
		</div>
		<!-- /. PAGE INNER  -->
	</div>

	</body>